<template>
  <div class="card">
    <div class="card-header" @click="showApplicationsDetail">
      <h3><i class="el-icon-menu"></i> 全部应用</h3>
      <i class="el-icon-more"></i>
    </div>
    <div class="card-body">
      <div class="app-grid">
        <div 
          v-for="(app, index) in paginatedApps" 
          :key="index" 
          class="app-item"
          @click="openApp(app)"
        >
          <div class="app-icon">{{ app.icon }}</div>
          <p class="app-name">{{ app.name }}</p>
        </div>
      </div>
      <div class="pagination">
        <el-button 
          v-for="page in totalPages" 
          :key="page" 
          @click="currentPage = page"
          :type="currentPage === page ? 'primary' : 'text'"
          size="mini"
        >
          {{ page }}
        </el-button>
      </div>
    </div>

    <ApplicationsDetail 
      :visible="isApplicationsDetailVisible" 
      :apps="apps"
      @close="hideApplicationsDetail"
    />
  </div>
</template>

<script>
import ApplicationsDetail from './ApplicationsDetail.vue'

export default {
  name: 'Applications',
  components: {
    ApplicationsDetail
  },
  data() {
    return {
      currentPage: 1,
      appsPerPage: 12,
      isApplicationsDetailVisible: false,
      apps: [
        { name: '办公大厅', icon: '📝', url: '/index.html' },
        { name: '采购系统', icon: '🛒' },
        { name: '维修系统', icon: '🔧' },
        { name: '设备管理', icon: '💻' },
        { name: '流程审批', icon: '📝' },
        { name: '人事管理', icon: '👥' },
        { name: '财务管理', icon: '💰' },
        { name: '资产管理', icon: '🏦' },
        { name: '项目管理', icon: '📊' },
        { name: '会议室预定', icon: '🕒' },
        { name: '公文管理', icon: '📄' },
        { name: '通知公告', icon: '📢' },
        { name: '考勤管理', icon: '📅' },
        { name: '培训系统', icon: '🎓' },
        { name: '知识库', icon: '📚' },
        { name: '数据分析', icon: '📈' },
        { name: '系统设置', icon: '⚙️' },
        { name: '客户管理', icon: '👤' },
        { name: '供应商管理', icon: '🏭' },
        { name: '合同管理', icon: '📑' },
        { name: '库存管理', icon: '📦' },
        { name: '报表中心', icon: '📋' },
        { name: '消息中心', icon: '✉️' },
        { name: '任务管理', icon: '✅' },
        { name: '日程管理', icon: '🗓️' }
      ]
    }
  },
  methods: {
    openApp(app) {
      if (true) {
        window.location.href = app.url;
      }
    },
    showApplicationsDetail() {
      this.isApplicationsDetailVisible = true
    },
    hideApplicationsDetail() {
      this.isApplicationsDetailVisible = false
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.apps.length / this.appsPerPage)
    },
    paginatedApps() {
      const start = (this.currentPage - 1) * this.appsPerPage
      const end = start + this.appsPerPage
      return this.apps.slice(start, end)
    }
  }
}
</script>

<style scoped>
.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.2s;
}

.card-header:hover {
  background-color: #f0f2f5;
}

.card-header h3 {
  margin: 0;
  font-size: 15px;
  color: #333;
  display: flex;
  align-items: center;
}

.card-header h3 i {
  margin-right: 8px;
  color: #666;
}

.card-body {
  padding: 12px;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  transition: all 0.2s;
}

.app-item:hover {
  background-color: #f5f7fa;
  transform: translateY(-2px);
}

.app-icon {
  font-size: 22px;
  margin-bottom: 6px;
}

.app-name {
  font-size: 12px;
  color: #333;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 4px;
}
</style>